<template>
    <!-- 弹窗块 -->
    <uni-popup ref="popup" :show="consult" type="bottom" maxHeight="820rpx" width="100vw">
        <!-- <van-popup id="moduleAppCouponPup" v-model="consult" position="bottom" class="modules coupon_mask" ref="vPopup"> -->
        <!-- <navigator class="closemask" @click="hideMask">
            <img :src="`${constant.imgUrl}design/addfriclose.png`" alt />
        </navigator>-->
        <div class="app-coupon-pup">
		    <image class="closemask" :src="`${constant.imgUrl}common/close.png`" @click="hideMask"></image>
            <div class="mask_title">限时专享优惠</div>
            <div class="mask_body">
                <div class="mask_wrap">
                    <div class="coupon_top">
                        <div class="coupon_tag">签单就送</div>
                        <div class="coupon_title">豪华装修大礼包</div>
                        <div class="coupon_type">
                            <span>限时优惠券</span>
                            <span class="text_sub_com">(2019.08.01~2019.10.30)</span>
                        </div>
                    </div>
                    <!-- <div class="coupon_bottom">
                        <span class="text_sub_com">详细说明：第一次到店签约成功送智能开关、电动窗帘、智能空调开关、自动升降衣架一套</span>
                    </div> -->
                </div>
                <!--  #ifdef H5 -->
                <div class="mask_input">
                    <input type="tel" maxlength="11" v-model="mobile" @blur="resetInput" placeholder="请输入手机号领取限时专享优惠券" />
                </div>
                <div class="send_coupon_btn" @click="signBtn">发送优惠券到手机</div>
                <!--  #endif -->
                <!--  #ifdef MP-WEIXIN -->
                <get-phone-number @cbFn="sendCoupon">
				    <div class="send_coupon_btn">{{btnTxt}}</div>
			    </get-phone-number>
                <!--  #endif -->

            </div>
        </div>
    </uni-popup>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { addCart } from '@/api/cart'
import { verifiPhone } from '@/utils/common'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
export default {
	name: 'app-coupon-pup',
	components: {
		uniPopup,
		getPhoneNumber
	},
	data() {
		return {
			consult: false,
			mobile: '',
			constant: this.$constant,
			currentQuery: '',
			btnTxt: '发送优惠券到手机'
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	mounted() {
		this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
	},
	methods: {
		showMask(mobile = '') {
			// this.consult = true
			const wxMobile = uni.getStorageSync('wxMobile') || ''
			this.mobile = mobile || wxMobile
			this.$refs.popup.open()
			// #ifdef MP-WEIXIN
			this.sendCoupon()
			// #endif
		},
		hideMask() {
			// this.consult = false
			this.$refs.popup.close()
		},
		resetInput() {
			// $('html,body').animate({ scrollTop: $('.coupon_card').offset().top }, 100)
			// window.scrollTo(0, 100)
		},
		sendCoupon() {
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile) {
				return
			}
			const params = {
				mobile_phone: mobile,
				prebook_source: '优惠券',
				owner_user_id: this.userInfo.user_id
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}

			addCart(params).then(res => {
				this.btnTxt = '领取成功'
				uni.showToast({
					title: '领取成功',
					icon: 'success',
					complete: () => {
						setTimeout(() => {
							this.hideMask()
						}, 2000)
					}
				})
			})
		},
		signBtn() {
			if (this.mobile == '') {
				this.$toast('请输入手机号码！')
				return false
			}

			if (!verifiPhone(this.mobile)) {
				this.$toast('请输入正确的手机号码！')
				return false
			}

			const params = {
				mobile_phone: this.mobile,
				prebook_source: '优惠券',
				owner_user_id: this.userInfo.user_id
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}

			addCart(params).then(res => {
				this.mobile = ''
				uni.showToast({
					title: '领取成功',
					icon: 'success',
					complete: () => {
						setTimeout(() => {
							this.hideMask()
						}, 2000)
					}
				})
			})
		}
	}
}
</script>

<style lang="scss">
</style>
<style lang="scss" scoped>
.app-coupon-pup {
    background-color: #fff;
    padding-bottom: 30px;
}
.mask_body {
    padding: 0 40px;
}
.mask_title {
    height: 100px;
    line-height: 100px;
    font-size: 36px;
    text-align: center;
}
.mask_wrap {
    background-size: 100% 100%;
    background-image: url('https://wximg.meijiabang.com/hkds/miniapp/images/common/coupon_bg_2.png');
    //   box-shadow: 0 2px 10px #ffeff0;
    //   padding: 36px 0 22px 0;
    padding: 1px;
    margin-bottom: 30px;
    .coupon_top {
        padding: 30px 0 50px 0;
        margin-left: 200px;
        & > div {
            margin: 6px;
        }
        & > view {
            margin: 0;
        }
    }
    .coupon_bottom {
        padding: 10px 30px 40px;
        .text_sub_com {
            line-height: 1.4;
        }
    }
}
.mask_input {
    input {
        width: calc(100% - 30px);
        height: 90px;
        border-radius: 50px;
        padding-left: 30px;
        outline: none;
        -webkit-appearance: none;
        background-color: #f5f5f5;
        border: 2px solid #ddd;
        font-size: 28px;
        color: #333;
    }
}
.send_coupon_btn {
    text-align: center;
    padding: 16px 0;
    color: #fff;
    font-size: 40px;
    border-radius: 50px;
    background: linear-gradient(#ff5b95, #ff3249);
    margin-top: 20px;
}

//   公共
.coupon_top,
.coupon_left {
    .coupon_tag {
        // width: 120px;
        display: inline-block;
        padding: 6px 10px;
        color: #fff;
        border-radius: 20px;
        background-color: #ff3249;
    }
    .coupon_title {
        font-size: 40px;
        font-weight: 600;
        color: #ff3249;
        margin-bottom: 10px !important;
    }
}
</style>
